<!doctype html>
<html class="is-smooth-scroll-compatible is-loading" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects.</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="theme-color" content="#ffffff">
        <meta name="msapplication-TileColor" content="#ffffff">
        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" sizes="152x152" href="dist/images/favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="dist/images/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="dist/images/favicons/favicon-16x16.png">
        <link rel="mask-icon" href="dist/images/favicons/safari-pinned-tab.svg" color="#000000">

        <link rel="stylesheet" href="dist/styles/main.css">

        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144274538-1"></script>
        <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());

         gtag('config', 'UA-144274538-1');
        </script>
    </head>
    <body>
        <div class="o-scroll" data-scroll-container id="js-scroll" data-horizontal="true">

            <div data-scroll-section>
                <h1>
                    <p class="o-h1 -huge" data-scroll data-scroll-speed="3.5" data-scroll-position="left">
                        Welcome to 
                    </p>
                    <p class="o-h1 -huge" data-scroll data-scroll-speed="2.5" data-scroll-delay="0.2" data-scroll-position="left">
                        Horizontal 
                    </p>
                    <p class="o-h1 -huge" data-scroll data-scroll-speed="1.5" data-scroll-delay="0.1" data-scroll-position="left">
                        Scrolling 
                    </p>
                </h1>
            </div>

            <div data-scroll-section>
                <div class="c-helicopter_wrapper">
                    <div class="o-h1 c-helicopter" data-scroll data-scroll-direction="vertical" data-scroll-speed="2">
                        🚁
                    </div>
                </div>
            </div>

            <div data-scroll-section>
                <div class="o-image_wrapper -full">
                    <div data-scroll class="o-image">
                        <img data-scroll-to data-scroll-href="left" src="dist/images/locomotive01.jpg" alt="Random image">
                    </div>
                </div>
            </div>
            <div data-scroll-section>
                <div class="o-image_wrapper -full">
                    <div data-scroll class="o-image">
                        <img data-scroll-to data-scroll-href="left" src="dist/images/locomotive02.jpg" alt="Random image">
                    </div>
                </div>
            </div>
            <div data-scroll-section>
                <div class="o-image_wrapper -full">
                    <div data-scroll class="o-image">
                        <img data-scroll-to data-scroll-href="left" src="dist/images/locomotive03.jpg" alt="Random image">
                    </div>
                </div>
            </div>

        </div>

        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
        <script nomodule src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>

        <script src="dist/scripts/main.js"></script>
    </body>
</html>
